<template>
  <Form :model="userInfo">
    <FormItem label="用户ID：">
      <Input v-model="userInfo.member_id" disabled></Input>
    </FormItem>
    <FormItem label="昵称：">
      <Input v-model="userInfo.nickname" disabled placeholder="请输入用户名"></Input>
    </FormItem>
    <FormItem label="手机号：">
      <Input v-model="userInfo.phone" disabled placeholder="请输入手机号"></Input>
    </FormItem>
    <FormItem label="邮箱：">
      <Input v-model="userInfo.email" disabled placeholder="请输入邮箱"></Input>
    </FormItem>
    <FormItem label="头像：">
      <br>
      <div class="avator">
        <img :src="userInfo.avator">
      </div>
    </FormItem>
    <FormItem label="状态：" prop="state">
      <i-switch
          size="large"
          v-model="userInfo.state"
          :disabled="disabled"
        >
          <span slot="open">启用</span>
          <span slot="close">停用</span>
        </i-switch>
    </FormItem>
  </Form>
</template>

<style lang="less" scoped>
.avator {
  height: 126px;
  width: 126px;
  float: left;
  img {
    border-radius: 50px;
    margin: 0 auto;
    margin-top: 13px;
    height: 100px;
    width: 100px;
  }
}
</style>

<script>

import { getImage } from '@/libs/util'
import { getMemberInfo } from '@/api/user'

export default {
  name: 'userInfo',
  props: {
    member_id: Number
  },
  watch: {
    member_id () {
      this.getMemberInfo()
    }
  },
  data () {
    return {
      userInfo: {
        member_id: '',
        nickname: '',
        phone: '',
        email: '',
        avator: '',
        state: true
      },
      disabled: false
    }
  },
  mounted: function () {
    this.getMemberInfo()
  },
  methods: {
    getMemberInfo () {
      if (this.member_id) {
        getMemberInfo(this.member_id).then(res => {
          const data = res.data
          if (data.code === 200) {
            this.userInfo = data.data
            this.userInfo.avator = getImage(data.data.avator)
            this.disabled = true
          } else {
            this.$Message.error(data.error)
          }
        }).catch(err => {
          console.log(err)
          this.$Message.error('获取失败')
        })
      }
    }
  }
}
</script>
